<title>服务水平</title>

<div class="page animation-fade">
    <div class="page-header page-header-bordered">
        <h1 class="page-title">服务水平</h1>
        <div class="page-header-actions">
            <select class="form-control" id="prjId" name="prjId" data-plugin="select2"
                    style="width: 200px;">
                <option value="">一级配送中心名称</option>
                #foreach( $prj in $prjList )
                <option value="${prj.branchId}">${prj.branchCenter}</option>
                #end
            </select>
        </div>
    </div>
    #parse("/common/loading.html")
    <div class="page-content">
        <div class="row">

            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: 5px;background-color: #015e7f;color: #fff">对各二级配送中心交付可靠性</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" style="width:100%" id="service-bar-one">

                    </div>
                </div>
            </div>
            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: 5px;background-color: #015e7f;color: #fff">对各二级配送中心订单完成率</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="service-bar-two" style="width:100%">

                    </div>
                </div>
            </div>

            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: 5px;background-color: #015e7f;color: #fff">对各二级配送中心缺货程度</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="service-bar-three" style="width:100%">

                    </div>
                </div>
            </div>

            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: 5px;background-color: #015e7f;color: #fff">对各二级配送中心缺货率</h3>
                        <div class="panel-actions">
                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" id="service-bar-four" style="width:100%">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/public/vendor/matchheight/jquery.matchHeight.min.js"></script>
<script type="text/javascript">
    function initbarOne() {
        service_bar_one.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: function(value){
                        var var1=value*1;
                        return var1;
                    },
                    textStyle:{
                        color:"#595959"
                    }
                },
                splitLine:{
                    show:true
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    }
                },
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLabel:{
                    show:true,
                    textStyle:{
                        color:"#595959"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            },
            series: [
                {
                    name:'可靠性',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#4472c4','#0fa99d','#d9d9d9','#787473','#c9eee7','#e7a14c',
                                    '#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                    barWidth:15,
                }
            ]
        })
    }
    function initbarTwo() {
        service_bar_two.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#998492'
                    }
                },
            },
            grid:{
                left: '3%',
                right: '4%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    //name: '订单量',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                },
                {
                    type: 'value',
                    // name: '频次',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:false
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            series: [
                {
                    name:'完成率',
                    type:'bar',
                    data:[],
                    barWidth:20,
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    },
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#4472c4','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                    '#0fa99d','#d9d9d9','#787473','#c9eee7','#e7a14c',
                                ];
                                return colorList[params.dataIndex]
                            },
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                    }
                },
            ]
        })
    }
    function initbarThree() {
        service_bar_three.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: function(value){
                        var var1=value*1;
                        return var1;
                    },
                    textStyle:{
                        color:"#595959"
                    }
                },
                splitLine:{
                    show:true
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    }
                },
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLabel:{
                    show:true,
                    textStyle:{
                        color:"#595959"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            },
            series: [
                {
                    name:'稀缺程度',
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#0fa99d',
                                ];
                                return colorList[params.dataIndex]
                            },
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},
                    barWidth:15,
                }
            ]
        })
    }
    function initbarFour() {
        service_bar_four.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#998492'
                    }
                },
            },
            grid:{
                left: '3%',
                right: '4%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                },

            ],
            series: [
                {
                    name:'缺货率',
                    type:'bar',
                    data:[],
                    barWidth:20,
                    itemStyle: {
                        normal: {
                            color: '#4472c4'
                        },
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    },
                },
            ]
        })
    }

    function reloadData(){
        document.getElementById("loading").style.display="";
        var center=$("#prjId").val();
        $.ajax({
            url: "#springUrl('/network/supply/service/bar1')",
            data: {"center": center},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    var option = service_bar_one.getOption();
                    option.yAxis = [
                        {
                            type: 'category',
                            data: d.data.x1
                        }
                    ];
                    option.series[0].data = d.data.x2;
                    service_bar_one.setOption(option);

                    option = service_bar_two.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: d.data.x1
                        }
                    ];
                    option.series[0].data = d.data.x3;
                    service_bar_two.setOption(option);

                    option = service_bar_three.getOption();
                    option.yAxis = [
                        {
                            type: 'category',
                            data: d.data.x1
                        }
                    ];
                    option.series[0].data = d.data.x4;
                    service_bar_three.setOption(option);

                    option = service_bar_four.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: d.data.x1,
                        }
                    ];
                    option.series[0].data=d.data.x5;
                    service_bar_four.setOption(option);
                    document.getElementById("loading").style.display="none";
                }else{
                    document.getElementById("loading").style.display="none";
                    var div1="<div type='text' style='margin-top:15%' class=' text-center  '>"+d.message+"</div>";
                    $("#service-bar-one").empty();
                    $("#service-bar-one").prepend(div1);
                    $("#service-bar-two").empty();
                    $("#service-bar-two").prepend(div1);
                    $("#service-bar-three").empty();
                    $("#service-bar-three").prepend(div1);
                    $("#service-bar-four").empty();
                    $("#service-bar-four").prepend(div1);
                }
            }
        });
    }

    $(function () {
        window.service_bar_one = echarts.init(document.getElementById('service-bar-one'), 'macarons');
        window.service_bar_two = echarts.init(document.getElementById('service-bar-two'), 'macarons');
        window.service_bar_three = echarts.init(document.getElementById('service-bar-three'), 'macarons');
        window.service_bar_four = echarts.init(document.getElementById('service-bar-four'), 'macarons');
        initbarOne();
        initbarTwo();
        initbarThree();
        initbarFour();
        reloadData();
        $("#prjId").change(function () {
            $("#loading").show();
            reloadData();
        }).trigger("change");
    });
</script>